<script setup>
import { ref, onMounted } from 'vue'
import { sessionApi, mineApi, exitApi } from '@/commons/api'
import routes from '@/commons/router'
import Msg from '@/components/message'
import Loader from '@/components/loader/Loader.vue'

const loadShow = ref(false)

// 界面挂载前处理
onMounted(() => {
  getUserInfo()
})

const userInfo = {
  userId: '',
  nickName: '',
  usname: '',
  mobile: '',
  oldPasswd: '',
  newPasswd: '',
  agnPasswd: '',
}
const userRef = ref(userInfo)
const getUserInfo = async () => {
  loadShow.value = true
  try {
    const res = await sessionApi()
    if (res.code === import.meta.env.VITE_SUCCESS_CODE) {
      userRef.value = res.data
      userRef.value.oldPasswd = ''
      userRef.value.newPasswd = ''
      userRef.value.agnPasswd = ''
    } else {
      localStorage.removeItem("token")
      Msg({ kind: 'error', txt: res.msg })
      routes.replace('/login')
    }
    loadShow.value = false
  } catch (e) {
    loadShow.value = false
    Msg({ kind: 'error', txt: '系统错误，请联系管理员！' + e })
  }
}

// save 保存提交
const save = async () => {
  let usname = userRef.value.usname
  let oldPasswd = userRef.value.oldPasswd
  let newPasswd = userRef.value.newPasswd
  let agnPasswd = userRef.value.agnPasswd
  let nickName = userRef.value.nickName
  let mobile = userRef.value.mobile
  if(nickName === '' || nickName.length > 50) {
    Msg({ kind: 'warn', txt: '用户的昵称不能为空，且长度不超过50个字符！' })
    return
  } else if(usname === '' || usname.length > 50) {
    Msg({ kind: 'warn', txt: '登录账号不能为空，且长度不超过50个字符！' })
    return
  } else if(mobile === '' || mobile.length !== 11) {
    Msg({ kind: 'warn', txt: '手机号码不能为空，且长度为11个字符！' })
    return
  }
  if(oldPasswd !== "") {
    if(newPasswd==='' || agnPasswd==='') {
      Msg({ kind: 'warn', txt: '新密码和重复密码不能为空！' })
      return
    } else if(newPasswd!==agnPasswd) {
      Msg({ kind: 'warn', txt: '两次新密码不一致，请检查！' })
      return
    }
  }
  loadShow.value = true
  try {
    const res = await mineApi(userRef.value)
    if(res.code === import.meta.env.VITE_SUCCESS_CODE) {
      await exit()
    } else {
      Msg({ kind: 'error', txt: res.msg })
    }
    loadShow.value = false
  } catch (e) {
    loadShow.value = false
    Msg({ kind: 'error', txt: '系统错误，请联系管理员！' + e })
  }
}

// 用户登出
const exit = async () => {
  loadShow.value = true
  try {
    const res = await exitApi()
    if(res.code === import.meta.env.VITE_SUCCESS_CODE) {
      routes.replace('/')
      Msg({ kind: 'success', txt: '恭喜您，个人资料修改成功，请重新登录！' })
    } else {
      Msg({ kind: 'error', txt: res.msg })
    }
    loadShow.value = false
  } catch (e) {
    loadShow.value = false
    Msg({ kind: 'error', txt: '系统错误，请联系管理员！' + e })
  }
}

// 清除文本框内容
const clrTxt = (idx) => {
  switch(idx) {
    case 1:
      userRef.value.nickName = ''
      break
    case 2:
      userRef.value.usname = ''
      break
    case 3:
      userRef.value.oldPasswd = ''
      break
    case 4:
      userRef.value.newPasswd = ''
      break
    case 5:
      userRef.value.agnPasswd = ''
      break
    case 6:
      userRef.value.mobile = ''
      break
  }
}

// 切换密码显示隐藏
const oldPwdShow = ref(true)
const newPwdShow = ref(true)
const agnPwdShow = ref(true)
const showPwd = (idx) => {
  switch(idx) {
    case 1:
      oldPwdShow.value = !oldPwdShow.value
      break
    case 2:
      newPwdShow.value = !newPwdShow.value
      break
    case 3:
      agnPwdShow.value = !agnPwdShow.value
  }
}
</script>

<template>
  <div class="a">
    <div>
      <div class="ipt-title"><span class="required">*</span>用户昵称</div>
      <div>
        <input type="text" v-model="userRef.nickName" maxlength="50" placeholder="请输入用户名称" class="ipt" />
        <i v-show="userRef.nickName" class="iconfont ipt-del-s" @click="clrTxt(1)">&#xea7f;</i>
      </div>
    </div>
    <div>
      <div class="ipt-title"><span class="required">*</span>登录账号</div>
      <div>
        <input type="text" v-model="userRef.usname" maxlength="50" placeholder="请输入登录账号" class="ipt" />
        <i v-show="userRef.usname" class="iconfont ipt-del-s" @click="clrTxt(2)">&#xea7f;</i>
      </div>
    </div>
    <div>
      <div class="ipt-title">原密码</div>
      <div>
        <input :type="oldPwdShow ? 'password' : 'text'" v-model="userRef.oldPasswd" maxlength="30" placeholder="请输入原密码，不修改密码则置空" class="ipt" />
        <i v-show="userRef.oldPasswd" class="iconfont ipt-show-s" @click="showPwd(1)" v-html="oldPwdShow ? '&#xea8f;' : '&#xea8d;'"></i>
        <i v-show="userRef.oldPasswd" class="iconfont ipt-del-s" @click="clrTxt(3)">&#xea7f;</i>
      </div>
    </div>
    <div>
      <div class="ipt-title">新密码</div>
      <div>
        <input :type="newPwdShow ? 'password' : 'text'" v-model="userRef.newPasswd" maxlength="30" placeholder="请输入新密码" class="ipt" />
        <i v-show="userRef.newPasswd" class="iconfont ipt-show-s" @click="showPwd(2)" v-html="newPwdShow ? '&#xea8f;' : '&#xea8d;'"></i>
        <i v-show="userRef.newPasswd" class="iconfont ipt-del-s" @click="clrTxt(4)">&#xea7f;</i>
      </div>
    </div>
    <div>
      <div class="ipt-title">重复密码</div>
      <div>
        <input :type="agnPwdShow ? 'password' : 'text'" v-model="userRef.agnPasswd" maxlength="30" placeholder="请再次输入新密码" class="ipt" />
        <i v-show="userRef.agnPasswd" class="iconfont ipt-show-s" @click="showPwd(3)" v-html="agnPwdShow ? '&#xea8f;' : '&#xea8d;'"></i>
        <i v-show="userRef.agnPasswd" class="iconfont ipt-del-s" @click="clrTxt(5)">&#xea7f;</i>
      </div>
    </div>
    <div>
      <div class="ipt-title"><span class="required">*</span>手机号码</div>
      <div>
        <input type="text" v-model="userRef.mobile" maxlength="11" placeholder="手机号码" class="ipt" />
        <i v-show="userRef.mobile" class="iconfont ipt-del-s" @click="clrTxt(6)">&#xea7f;</i>
      </div>
    </div>
    <div class="b">
      <div class="btn-pi" style="height: 40px; line-height: 40px;" @click="save()"><i class="iconfont">&#xe687;</i> 保存</div>
    </div>
    <loader :loadShow="loadShow" />
  </div>
</template>

<style scoped>
.a {width: 600px; margin: 10px auto;}
.b {padding-top: 20px;}
</style>